<template>
  <div class="img-container">
    <img :src="qrCodeImg">
  </div>
</template>

<script>
import { getQrCodeKey, getQrCode, checkQrCode, getAccountInfo } from '../../servers';
import { getTimeStamp } from '@/plugins/utils';

export default {
  name: 'qrCodeLogin',
  data() {
    return {
      key: '',
      qrCodeImg: '',
      timer: null,
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      await this.getQrCodeKey();
      await this.getQrCode();
      await this.checkQrCode();
    },

    async getQrCodeKey() {
      const res = await getQrCodeKey({ timestamp: getTimeStamp() });
      this.key = res.data.data.unikey;
    },

    async getQrCode() {
      const res = await getQrCode({ key: this.key, qrimg: true, timestamp: getTimeStamp() });
      this.qrCodeImg = res.data.data.qrimg;
    },

    async checkQrCode() {
      this.timer = setInterval(async () => {
        // 定时器已被清空或已处于登录状态 则不向下执行
        if (!this.timer || this.$store.state.isLogin) return;

        const res = await checkQrCode({ key: this.key, timestamp: getTimeStamp() });
        if (res.data.code === 800) {
          // 二维码过期
          this.clearChecker();
          this.init();
        } else if (res.data.code === 803) {
          // 授权成功
          this.clearChecker();
          this.getAccountInfo();
        }
      }, 2000);
    },

    async getAccountInfo() {
      const res = await getAccountInfo();
      if (res.data.code == 200) {
        window.localStorage.setItem('userId', res.data.profile.userId);
        this.$emit('getUserInfo', res.data.profile);
        this.$message.success('登录成功!');
        this.$store.commit('updataLoginState', true);
      }
    },

    clearChecker() {
      clearInterval(this.timer);
      this.timer = null;
    },
  },
  beforeDestroy() {
    this.clearChecker();
  },
};
</script>

<style lang="less" scoped>
.img-container {
  text-align: center;

  img {
    height: 120px;
  }
}
</style>
